<template>
  <view class="component product">
    <view class="img-area"><image class="img" :src="data.imgurl"></image></view>
    <view class="info">
      <view class="title">{{ data.title }}</view>
      <view class="desc-item"><view class="desc-label"></view></view>
      <view class="info-ft">
        <view
          class="ui-tag tag-style--orange"
          v-if="t in data.tags"
          >{{ t.label }}</view
        >
        <view class="operate-area" v-if="operate">
          <view class="operate--edit"
            v-if="data.status == '1'"
            ><text class="text">{{ data.total }}</text>
            
            <view class="iconfont icon-a-44_44_fill_edit"></view>
            </view
          >
          <view class="operate--add" v-if="data.status == '2'">
            <view class="iconfont icon-a-44_44_fill_add"></view>
          </view>
          
          <view class="operate--input" v-if="data.status == '3'">
            <view class="ui-button button-style--primary">录串号</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const data = ref({
  imgurl: '',
  title: '华为P70',
  desc: [
    {
      label: '商品编号',
      text: 'HUA628929292'
    }
  ],
  tags:[
    {
      label: '128g 白色',
    }
  ],
  status: '1',
  operate: true,
  total: 10,
})
</script>

<style lang="scss" scoped>
@import "@/static/scss/theme.scss";
.product {
  .img {
    &-area {
      width: 120rpx;
      height: 120rpx;
      border-radius: $border-radius;
      border: 2rpx solid $border-color;
    }
  }
}
</style>
